<template>
    <div class="default-main ba-table-box">
        <el-drawer
            title="添加景点"
            v-model="Table_data.table.extend!.showInfo"
            size="70%"
            show-close
            :withHeader="false"
        >
            <el-form
                label-width="77px"
                style="margin-top: 30px"
                class="ele-form-search"
                @submit.native.prevent
            >
                <span style="font-size: 18px;color: red; padding: 20px;">{{ currentMonthYear }}</span>

                <div style="display: flex;justify-content: center">
                    <el-button @click="changeMonth(-1)">上一月</el-button>
                    <el-button @click="changeMonth(1)">下一月</el-button>

                </div>

            </el-form>

            <div class="calendar">
                <div class="calendar-grid">
                    <div
                        v-for="day in daysInMonth"
                        :key="day.date"
                        class="calendar-day"
                    >
                        <div class="date">{{ day.date }}号</div>
                        <input
                            v-model="day.price"
                            type="number"
                            placeholder="请输入价格"
                            class="price-input"
                        />
                    </div>
                </div>
            </div>
        </el-drawer>
    </div>
</template>

<script setup lang="ts">
import {ref, computed, onMounted, watch, inject, provide} from 'vue';
import {ElMessage} from 'element-plus';
import createAxios from "/@/utils/axios";
import {useI18n} from 'vue-i18n';
import type {FormInstance} from 'element-plus';
import Table2 from '/@/components/table/index.vue';
import baTableClass3 from '/@/utils/baTable';

const {t} = useI18n();
const Table_data = inject('baTable') as any;

const currentDate = ref(new Date());
const daysInMonth = ref<any[]>([]);

const currentMonthYear = computed(() => {
    const options = {year: 'numeric', month: 'long'};
    return currentDate.value.toLocaleDateString('zh-CN', options);
});

const changeMonth = (offset: number) => {
    // 通过更新currentDate来触发视图更新
    currentDate.value = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + offset, 1);
    updateDaysInMonth();
};

const updateDaysInMonth = () => {
    const startOfMonth = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth(), 1);
    const endOfMonth = new Date(currentDate.value.getFullYear(), currentDate.value.getMonth() + 1, 0);
    daysInMonth.value = [];
    for (let i = 1; i <= endOfMonth.getDate(); i++) {
        daysInMonth.value.push({date: i, price: ''});
    }
};

onMounted(() => {
    updateDaysInMonth();
});

const submits = () => {
    // 执行提交操作，这里可根据实际情况修改
    ElMessage.success('提交成功!');
    Table_data.table.extend!.showInfo = false;
    // 假设刷新表格操作
    Table_data.onTableHeaderAction('refresh', {});
};

// 观察弹窗状态，加载数据或刷新表格
watch(() => Table_data.table.extend!.showInfo, (newVal) => {
    if (newVal) {
        // 可根据实际需求处理数据加载
        console.log("弹窗打开");
    }
});

provide('baTable', Table_data);
</script>

<style scoped lang="scss">
.calendar {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px;
}

.calendar-header {
    display: flex;
    justify-content: space-between;
    width: 300px;
    margin-bottom: 10px;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    grid-gap: 10px;
    width: 100%;
}

.calendar-day {
    text-align: center;
    padding: 10px;
    border: 1px solid #ccc;
    position: relative;
}

.date {
    font-weight: bold;
}

.price-input {
    width: 100%;
    padding: 5px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.ele-form-actions {
    margin-top: 20px;
    display: flex;
    justify-content: flex-end;
}
</style>
